<div class="panel-info">
  <div class="title">
    {{ data[infoConfig.ttlName] || data['watergateCode'] }}
  </div>
  <ul class="monitor-list" *ngIf="infoConfig['monitor']">
    <ng-container *ngIf="data.layer == 'hh'">
      <li>
        <div>{{ data.waterHeight || data.heightInside || '-' }}</div>
        <div>水位(m)</div>
      </li>
      <li>
        <div>{{ data.flux || data.fluxOut || '-' }}</div>
        <div>流量(m³/s)</div>
      </li>
      <li *ngIf="data.storage">
        <div>{{ data.storage/100 }}</div>
        <div>蓄水量(亿m³)</div>
      </li>
    </ng-container>
    <ng-container *ngIf="data.layer != 'hh'">
      <li *ngFor="let item of infoConfig['monitor']">
        <div>{{ data[item.key] == undefined ? '-' : data[item.key] }}</div>
        <div>{{ item.text }}{{ item.unit ? "(" + item.unit + ')' : '' }}</div>
      </li>
    </ng-container>
  </ul>
  <div *ngIf="data['fileId']" class="pic-object"
    [style.backgroundImage]="'url(http://10.6.181.223:9008/api/comm/file/view/' + data['fileId'] + ')'"></div>
  <div *ngIf="!data['fileId']" class="pic-object"></div>
  <ul class="attr-list">
    <li *ngFor="let item of infoConfig['attrs']">
      <span>{{ item.text }}: </span>
      <span>{{ data.layer == 'guanyu' && item.key == 'type' ?  irrAreaType[data[item.key]] : item.key == 'wiustTp' ? IntakeType[data[item.key]] : item.key == 'stadiaType' ? stadiaType[data[item.key]] : (data[item.key] || '-') }}
        {{ item.unit ? "(" + item.unit + ')' : '' }}</span>
    </li>
  </ul>
  <div class="btn-group">
    <div *ngIf="noInfoArr.indexOf(data.layer) == -1" (click)="infoVisible = true">
      <img src="./assets/images/map/icon-info.png" alt="">档案
    </div>
    <div *ngIf="monitorArr.indexOf(data.layer) > -1" (click)="monitorVisible = true">
      <img src="./assets/images/map/icon-monitor1.png" alt="">监测
    </div>
  </div>

  <nz-modal [(nzVisible)]="infoVisible" [nzTitle]="data[infoConfig.ttlName]" (nzOnCancel)="infoVisible = false"
    nzWidth="800" nzMask="false" [nzFooter]="nzFooter">
    <app-dialog-info [data]="data"></app-dialog-info>
  </nz-modal>

  <nz-modal [(nzVisible)]="monitorVisible" [nzTitle]="data[infoConfig.ttlName]" (nzOnCancel)="monitorVisible = false"
    nzWidth="900" nzMask="false" [nzFooter]="nzFooter">
    <app-dialog-pump *ngIf="monitorType == 1" [data]="data"></app-dialog-pump>
    <app-dialog-gate *ngIf="monitorType == 2" [data]="data"></app-dialog-gate>
    <app-dialog-intake *ngIf="monitorType == 3" [data]="data"></app-dialog-intake>
    <app-dialog-section *ngIf="monitorType == 4" [data]="data"></app-dialog-section>
    <app-monitor-gate *ngIf="monitorType == 5" [data]="data"></app-monitor-gate>
    <app-monitor-pump *ngIf="monitorType == 6" [data]="data"></app-monitor-pump>
  </nz-modal>
</div>
